<template>
  <el-dialog
    v-el-drag-dialog
    :title="!dataForm.returnId ? '新增' : '查看'"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="150px">
    <el-row :gutter="20">
      <el-col :span="10">
        <el-form-item label="订单号:">
          <span>{{dataForm.orderNo}}</span>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="退货类型:">
          <span>{{dataForm.returnType === 1 ? '仅退款' : (dataForm.returnType === 2 ? '退货并退款' : (dataForm.returnType === 3 ? '换货' : ''))}}</span>
          <!-- <el-select v-model="dataForm.returnType" disabled>
            <el-option label="仅退款" :value="1"></el-option>
					  <el-option label="退货并退款" :value="2"></el-option>
            <el-option label="换货" :value="3"></el-option>
          </el-select> -->
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <br/>
      <el-col :span="10">
        <el-form-item label="是否收到物品:">
          <span>{{dataForm.firstGetGoods === 0 ? '未收到' : (dataForm.firstGetGoods === 1 ? '未收到' : '')}}</span>
          <!-- <el-select v-model="dataForm.firstGetGoods" disabled>
            <el-option label="未收到" :value= 0 />
            <el-option label="已收到" :value= 1 />
          </el-select> -->
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="退货状态:">
          <span>{{dataForm.returnStatus === 1 ? '已申请' : (dataForm.returnStatus === 2 ? '审核通过' : (dataForm.returnStatus === 3 ? '退货中/退款中/换货中' : (
            dataForm.returnStatus === 4 ? '退货成功' : (dataForm.returnStatus === 5 ? '审核未通过' : (dataForm.returnStatus === 6 ? '退货失败' : (dataForm.returnStatus === 7 ? '已撤销' : ''))))))}}</span>
          <!-- <el-select v-model="dataForm.returnStatus" disabled>
            <el-option label="已申请" :value= 1 />
            <el-option label="审核通过" :value= 2 />
            <el-option label="退货中/退款中/换货中" :value= 3 />
            <el-option label="退货成功" :value= 4 />
            <el-option label="审核未通过" :value= 5 />
            <el-option label="退货失败" :value= 6 />
            <el-option label="已撤销" :value= 7 />
          </el-select> -->
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="10">
        <el-form-item label="申请退货时间:">
          <span>{{dataForm.applyReturnTime}}</span>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="实际审核时间:">
          <span>{{dataForm.returnAuditTime}}</span>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="10">
        <el-form-item label="申请退款金额:" prop="applyReturnMoney">
          <!-- <span>{{dataForm.applyReturnMoney}}</span> -->
          <el-input v-model="dataForm.applyReturnMoney" placeholder="申请退款金额" :disabled="dataForm.showOrHidder"/>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="实际退款金额:">
          <span>{{dataForm.realReturnMoney}}</span>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="10">
        <el-form-item label="申请退款积分:" prop="applyReturnIntegral">
          <el-input v-model="dataForm.applyReturnIntegral" placeholder="申请退款积分" disabled/>
          <!-- <span>{{dataForm.applyReturnIntegral}}</span> -->
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="实际退款积分:">
          <span>{{dataForm.realReturnIntegral}}</span>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="10">
        <el-form-item label="申请退款运费金额:" prop="applyReturnFreight">
          <el-input v-model="dataForm.applyReturnFreight" placeholder="申请退款运费金额" disabled/>
          <!-- <span>{{dataForm.applyReturnFreight}}</span> -->
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="实际退款运费金额:">
          <span>{{dataForm.realReturnFreight}}</span>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="10">
        <el-form-item label="用户收货联系人:">
          <span>{{dataForm.consignee}}</span>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="用户收货联系电话:">
          <span>{{dataForm.iphone}}</span>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="10">
        <el-form-item label="用户的收货地址:">
          <span>{{dataForm.address}}</span>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="退货商品总数量:">
          <span>{{dataForm.returnGoodsCount}}</span>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="10">
        <el-form-item label="用户退货寄件单号:">
          <span>{{dataForm.userShipCode}}</span>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="用户退货寄件时间:">
          <span>{{dataForm.userShipTime}}</span>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="10">
        <el-form-item label="用户退货寄件备注:">
          <span>{{dataForm.userShipRemark}}</span>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="第三方退款流水号:">
          <span>{{dataForm.tradeNo}}</span>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="10">
        <el-form-item label="退款时间:">
          <span>{{dataForm.platformRefundTime}}</span>
        </el-form-item>
      </el-col>
    </el-row>
    <el-table v-if="this.goodsInfoList.length !== 0"
      :data="goodsInfoList"
      border
      style="width: 100%">
      <el-table-column
        prop="goodsName"
        label="商品名">
      </el-table-column>
      <el-table-column
        prop="goodsSerial"
        label="型号">
      </el-table-column>
      <el-table-column
        prop="specInfo"
        label="规格">
      </el-table-column>
      <el-table-column
        prop="count"
        label="数量">
      </el-table-column>
      <el-table-column
        prop="state"
        label="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.state === 1">正常</el-tag>
          <el-tag v-if="scope.row.state === 2">退货中</el-tag>
          <el-tag v-if="scope.row.state === 3">退款中</el-tag>
          <el-tag v-if="scope.row.state === 4">换货中</el-tag>
          <el-tag v-if="scope.row.state === 5">已退货</el-tag>
          <el-tag v-if="scope.row.state === 6">已退款</el-tag>
          <el-tag v-if="scope.row.state === 7">已换货</el-tag>
          <el-tag v-if="scope.row.state === 8">退货失败</el-tag>
          <el-tag v-if="scope.row.state === 9">已退款失败</el-tag>
          <el-tag v-if="scope.row.state === 10">已换货失败</el-tag>
        </template>
      </el-table-column>
    </el-table>
    <br/>
    <el-form-item label="申请退货备注" prop="applyReturnRemark">
      <el-input type="textarea" v-model="dataForm.applyReturnRemark" placeholder="申请退货备注"></el-input>
    </el-form-item>
    <el-form-item label="申请退货图片" prop="img">
      <!-- <el-input v-model="dataForm.applyReturnImages" placeholder="申请退货图片 多个使用逗号(,)隔开"></el-input> -->
      <el-upload
      action=""
      :limit="4"
      list-type="picture-card"
      :file-list="dataForm.img"
      :on-preview="handlePreview1"
      :on-success="handleSuccess1"
      :on-remove="handleRemove1"
      :on-exceed="onExceed1">
      <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible" :append-to-body='true'>
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
    </el-form-item>
    <el-form-item label="审核备注(用户)" prop="userAuditRemark">
      <el-input type="textarea" v-model="dataForm.userAuditRemark" placeholder="审核(成功/拒绝)备注 （用户查看使用）"></el-input>
    </el-form-item>
    <el-form-item label="审核备注(平台）" prop="platformAuditRemark">
      <el-input type="textarea" v-model="dataForm.platformAuditRemark" placeholder="审核(成功/拒绝)备注 （平台内的用户查看使用,可以一直追加）"></el-input>
    </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        visible: false,
        dialogImageUrl: '',
        dialogVisible: false,
        goodsInfoList: [],
        dataForm: {
          returnId: 0,
          orderNo: '',
          returnType: '',
          firstGetGoods: '',
          returnStatus: '',
          applyReturnTime: '',
          applyReturnRemark: '',
          applyReturnImages: '',
          returnGoodsCount: '',
          applyReturnMoney: '',
          applyReturnIntegral: '',
          applyReturnFreight: '',
          realReturnMoney: '',
          realReturnIntegral: '',
          realReturnFreight: '',
          returnAuditTime: '',
          userAuditRemark: '',
          platformAuditRemark: '',
          consignee: '',
          iphone: '',
          address: '',
          img: [],
          showOrHidder: '',
          sumMoney: '',
          userShipCode: '',
          userShipTime: '',
          userShipRemark: '',
          platformRefundTime: '',
          tradeNo: ''
        },
        dataRule: {
          applyReturnMoney: [
            { required: true, message: '申请退款金额不能为空', trigger: 'blur' },
            {pattern: /^(([0-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/, message: '申请退款金额不合法，请规范输入', trigger: 'blur'}
          ],
          applyReturnIntegral: [
            { required: true, message: '申请退款积分不能为空', trigger: 'blur' },
            {pattern: /^\+?[0-9]\d*$/, message: '申请退款积分正整数', trigger: 'blur'}
          ],
          applyReturnFreight: [
            { required: true, message: '申请退款运费金额不能为空', trigger: 'blur' },
            {pattern: /^(([0-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/, message: '申请退款运费金额不合法，请规范输入', trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      // 图片预览
      handlePreview1 (file) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true
      },
      // 文件上传成功的钩子函数
      handleSuccess1 (res, file, fileList) {
        this.$message({
          type: 'info',
          message: '图片上传成功',
          duration: 6000
        })
        if (res.code === 0) {
          this.dataForm.img.push({url: res.data[0].urlList[0]})
        }
        // console.log(this.dataForm.imgs)
      },
      // 删除文件之前的钩子函数
      handleRemove1 (file, fileList) {
        console.log(file.id)
        for (var i = 0; i < this.dataForm.img.length; i++) {
          var picc = this.dataForm.img[i]
          if (picc.url === file.url) {
            this.dataForm.img.splice(i, 1)
          }
        }
        // console.log(this.dataForm.imgs)
        this.$message({
          type: 'info',
          message: '已删除原有图片',
          duration: 6000
        })
      },
      // 上传的文件个数超出设定时触发的函数
      onExceed1 (files, fileList) {
        this.$message({
          type: 'info',
          message: '最多只能上传4个图片',
          duration: 6000
        })
      },
      init (id) {
        this.dataForm.returnId = id || 0
        this.visible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.returnId) {
            this.$http({
              url: this.$http.adornUrl(`/returnGoods/getShoppingMallOrderReturnDetails/${this.dataForm.returnId}`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.dataForm.orderNo = data.data.orderNo
                this.dataForm.returnType = data.data.returnType
                this.dataForm.firstGetGoods = data.data.firstGetGoods
                this.dataForm.returnStatus = data.data.returnStatus
                if (this.dataForm.returnStatus === 1) {
                  this.dataForm.showOrHidder = false
                } else {
                  this.dataForm.showOrHidder = true
                }
                this.dataForm.applyReturnTime = data.data.applyReturnTime
                this.dataForm.applyReturnRemark = data.data.applyReturnRemark
                this.dataForm.applyReturnImages = data.data.applyReturnImages
                this.dataForm.returnGoodsCount = data.data.returnGoodsCount
                this.dataForm.applyReturnMoney = data.data.applyReturnMoney
                this.dataForm.applyReturnIntegral = data.data.applyReturnIntegral
                this.dataForm.applyReturnFreight = data.data.applyReturnFreight
                this.dataForm.realReturnMoney = data.data.realReturnMoney
                this.dataForm.realReturnIntegral = data.data.realReturnIntegral
                this.dataForm.realReturnFreight = data.data.realReturnFreight
                this.dataForm.returnAuditTime = data.data.returnAuditTime
                this.dataForm.userAuditRemark = data.data.userAuditRemark
                this.dataForm.platformAuditRemark = data.data.platformAuditRemark
                this.dataForm.consignee = data.data.consignee
                this.dataForm.iphone = data.data.iphone
                this.dataForm.address = data.data.address
                this.goodsInfoList = data.data.list
                this.dataForm.sumMoney = data.data.sumMoney
                var pic = data.data.img
                if(pic != null && pic !== '') {
                  for (var i = 0; i < pic.length; i++) {
                    this.dataForm.img.push({url: 'http://image.yilianbaihui.cn/consumer/' + pic[i]})
                  }
                }
                this.dataForm.userShipCode = data.data.userShipCode
                this.dataForm.userShipTime = data.data.userShipTime
                this.dataForm.userShipRemark = data.data.userShipRemark
                this.dataForm.platformRefundTime = data.data.platformRefundTime
                this.dataForm.tradeNo = data.data.tradeNo
              }
            })
          }
        })
      },
      // 表单提交
      dataFormSubmit () {
        if (this.dataForm.applyReturnMoney > this.dataForm.sumMoney) {
          debugger
          this.$message.error('申请退款金额不得大于订单金额')
          return false
        }
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(`/returnGoods/modifyReturnGoodsById`),
              method: 'post',
              data: this.$http.adornData({
                'returnId': this.dataForm.returnId,
                'applyReturnMoney': this.dataForm.applyReturnMoney,
                'applyReturnIntegral': this.dataForm.applyReturnIntegral,
                'applyReturnFreight': this.dataForm.applyReturnFreight,
                'applyReturnRemark': this.dataForm.applyReturnRemark,
                'userAuditRemark': this.dataForm.userAuditRemark,
                'platformAuditRemark': this.dataForm.platformAuditRemark
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      }
    }
  }
</script>
